<template>
	<view class="group-wrap">
		<Tabs :TabList="tabList" :currentTab="checkedTab" @tabs="tabsChange" :lineWidth="250">
			<TabPane>
				<view class="group-body" v-if="status===0">
					<view class="group-item" v-for="(item, index) in groupList" :key='index'>
						<groupTpl :groupData="item" :isRecommend="true" :state="'awaitBegin'" />
					</view>
				</view>
			</TabPane>
			<TabPane>
				<view class="group-body" v-if="status===1">
					<view class="group-item" v-for="(item, index) in groupList" :key='index'>
						<groupTpl :groupData="item" :isRecommend="true"  :state="'begined'"/>
					</view>
				</view>
			</TabPane>
			<TabPane>
				<view class="group-body" v-if="status===2">
					<view class="group-item" v-for="(item, index) in groupList" :key='index'>
						<groupTpl :groupData="item" :isRecommend="true"  :state="'overdue'"/>
					</view>
				</view>
			</TabPane>
		</Tabs>
	</view>
</template>

<script>
	import Tabs from '../../components/public/tabs.vue'
	import TabPane from '../../components/public/tabPane.vue'
	import groupTpl from '../../components/life-circle/group-tpl.vue'
	import {
		getMyGroup
	} from '../../../apis/personal/index.js';

	export default {
		data() {
			return {
				checkedTab: 0,
				tabList: [{
						title: '待开始',
						status: 0
					},
					{
						title: '已开始',
						status: 1
					},
					{
						title: '已过期',
						status: 2
					}
				],
				groupList: []
			}
		},
		components: {
			Tabs,
			TabPane,
			groupTpl
		},
		onShow() {
			this.getGroupList()
		},
		computed: {
			status() {
				return this.tabList.find(item => item.status === this.checkedTab).status
			},
		},
		methods: {
			tabsChange(index) {
				this.checkedTab = index
				this.getGroupList()
			},
			getGroupList() {
				const {
					latitude,
					longitude
				} = uni.getStorageSync("location");

				let params = {
					page: 1,
					longitude,
					latitude,
					status: this.status
				}
				this.$loading.show()
				getMyGroup(params).then(res => {
					if (+res.code === 200) {
						this.groupList = res.data;
						this.$loading.hide();
					}
				})
			},
		}
	}
</script>

<style lang="less">
	.group-wrap {
		background: #f8f8f8;

		.group-body {
			padding: 20rpx;
			box-sizing: border-box;


		}
	}
</style>
